<script lang="ts" setup>
interface ResData {
  data: {
    retData: any[];
    resNumbers: any[];
  };
}
defineOptions({
  name: "MultiWin"
});
const props = withDefaults(defineProps<{ resData: ResData }>(), {
  resData: () => ({ data: { retData: [], resNumbers: [] } })
});

import { getSvg } from "@/utils";
import useWinRes from "../../hooks/useWinRes";
import WinIt4 from "./WinIt4.vue";
import WinIt5 from "./WinIt5.vue";
import { classifyResults } from "../../hooks/useUtils";
const { toggleWinRes } = useWinRes();
const { winningItems, losingItems } = classifyResults(
  props?.resData?.data?.retData || []
);
</script>
<template>
  <div class="w-100vw h-100vh overflow-y-auto center font-[Inter,Inter]">
    <div class="w-350 h-auto relative">
      <img class="w-full h-685" :src="getSvg('Frame_512')" alt="Frame_512" />
      <div class="w-full absolute top-147 left-50% translate-x-[-50%]">
        <!-- 小于等于4 -->
        <WinIt4
          v-if="winningItems?.length <= 4"
          :retData="winningItems"
          :resNumbers="resData?.data?.resNumbers"
        />
        <!-- 大于等于5 -->
        <WinIt5
          v-else
          :retData="winningItems"
          :resNumbers="resData?.data?.resNumbers"
        />
        <div class="mt-6 text-center font-300 text-11 color-[#787878]">
          หมายเลขเหล่านี้ ไม่ถูกรางวัล
        </div>
        <div
          class="scroll-bar mt-9 w-310 mx-auto h-60 overflow-y-auto font-normal text-10 color-[#E90F0F] lh-15 text-left"
        >
          <i
            v-for="(it, idx) in losingItems"
            :key="idx"
            class="w-50 inline-block"
            >{{ it.number }}{{ idx < losingItems.length - 1 ? "、" : "" }}</i
          >
        </div>
        <div class="mt-6 w-320 mx-auto h-100 b-1 b-solid b-pink"></div>
        <div class="mt-8 text-center font-300 text-10 color-#424242">
          กรุณาตรวจสอบอีกครั้งกับสำนักงานสลากกินแบ่งรัฐบาล
        </div>
      </div>
      <div
        class="w-36 h-36 mt-12 absolute left-50% translate-x-[-50%]"
        @click="toggleWinRes()"
      >
        <img class="w-36 h-36" :src="getSvg('Close')" alt="" />
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
